<template>
  <div class="user">
    <SearchPage
      :search-from-config="searchFromConfig"
      @ResetClick="ResetClick"
      @QueryClick="QueryClick"
    ></SearchPage>

    <ContentPage
      :contentTableConfig="contentTableConfig"
      page-name="users"
      @selection-change="SelectionChange"
      ref="contentRef"
      @insertNewClick="insertNewClick"
      @EditClick="EditClick"
    ></ContentPage>
    <modalPage
      :title="title"
      pageName="users"
      :defaultInfo="defaultInfo"
      :modalConfig="modalConfigRef"
      ref="modalRef"
    ></modalPage>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, ref } from 'vue'

import SearchPage from '@/components/search-page'
import ContentPage from '@/components/content-page'
import modalPage from '@/components/modal-page'

import { searchFromConfig } from './config/search.config'
import { contentTableConfig } from './config/content.config'
import { modalConfig } from './config/modal.config'

import { useSearchPage } from '@/hooks/useSearchPage'
import { useModalPage } from '@/hooks/useModalPage'

import { useStore } from '@/store'

export default defineComponent({
  name: 'user',
  components: {
    SearchPage,
    ContentPage,
    modalPage
  },
  setup() {
    const title = ref('')
    // 拿到table选中的值
    const SelectionChange = (selectInfo: any[]) => {
      console.log(selectInfo)
    }
    // searchpage的hook
    const { contentRef, ResetClick, QueryClick } = useSearchPage()

    // 处理新建或者编辑时是否显示密码的input
    const insertNewCallBack = () => {
      title.value = '新建用户'
      const passworditem = modalConfig.formItems.find(
        (item) => item.field === 'password'
      )
      passworditem!.isHidden = false
    }
    const editCallBack = () => {
      title.value = '编辑用户'
      const passworditem = modalConfig.formItems.find(
        (item) => item.field === 'password'
      )
      passworditem!.isHidden = true
    }

    // 动态添加部门和角色
    // 让配置文件就有响应式,包裹computed()
    // 在modalConfigRef里返回modalConfig,vuex改变,就会动态添加
    const store = useStore()
    const modalConfigRef = computed(() => {
      const departmentitem = modalConfig.formItems.find(
        (item) => item.field === 'departmentId'
      )
      const roleitem = modalConfig.formItems.find(
        (item) => item.field === 'roleId'
      )
      departmentitem!.options = store.state.allDepartment.map((item) => {
        return { title: item.name, value: item.id }
      })
      roleitem!.options = store.state.allRole.map((item) => {
        return { title: item.name, value: item.id }
      })
      return modalConfig
    })

    // modalpage的hook
    const { modalRef, EditClick, insertNewClick, defaultInfo } = useModalPage(
      insertNewCallBack,
      editCallBack
    )

    return {
      searchFromConfig,
      contentTableConfig,
      SelectionChange,
      contentRef,
      ResetClick,
      QueryClick,
      modalConfigRef,
      modalRef,
      EditClick,
      insertNewClick,
      defaultInfo,
      title
    }
  }
})
</script>

<style scoped lang="less"></style>
